


import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { getCardList } from './service'
import { Spin } from 'antd'



export default function FuelCardUsageStats() {
  const [cardList, setCardList] = React.useState<any[]>([]);
  const [loading, setLoading] = React.useState(false)

  const columns=[
    {
      title: '油卡号',
      dataIndex: 'card_id',

    },
    {
      title: '持有人工号',
      dataIndex: 'driver_id',
      ellipsis: true,
    },
    {
      title: '余额',
      dataIndex: 'card_balance',
      sorter: (a: any, b: any) => a.card_balance - b.card_balance,
    },
  ]

  const queryList = async () => {
    setLoading(true)
    await getCardList().then(res => {
      setCardList(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">油卡使用统计</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          {/* <div className="VCard-list">
            <VCard type={'cards'} title={'车队'} dataSource={driverStatus}></VCard>
          </div> */}
          <div className="VCard-list">
          <VCard title={'出车信息'} type={'table'} columns={columns} dataSource={cardList}></VCard>
          </div>
        
      
        </Spin>
      </div>
    </div>
  )
}

